<!--
 * @Description: 
 * @Author: Gaq
 * @Date: 2022-11-25 14:18:47
 * @LastEditTime: 2022-11-25 20:24:16
 * @LastEditors: Gaq
-->
<script setup>
import { ElMessage } from "element-plus";
import request from "@/utils/request";

let userInfo = ref({});
const upload = ref(false);
const files = ref([]);

onBeforeMount(() => {
  userInfo.value = JSON.parse(localStorage.getItem("user"));
});

const updateUserInfo = (res) => {
  request.put(`/user/updateOne`, res).then((res) => {
    if (res.code == -1) {
      ElMessage.warning(res.msg);
    } else {
      ElMessage.success("更新用户信息成功");
      getNewUserInfo();
    }
  });
};
// 获取最新用户信息
const getNewUserInfo = () => {
  request.get(`/user/getOne/` + userInfo.value.userId).then((res) => {
    if (res.code == -1) {
      console.log(res.msg);
    } else {
      userInfo.value = res.data;
      localStorage.setItem("user", JSON.stringify(res.data));
    }
  });
};
const onChange = (file, fileList) => {
  files.value.push(file.raw);
  upload.value = true;
};

const handleUploadImage = () => {
  const formData = new FormData();
  formData.append("file", files.value[0]);
  request.post(`/uploadImg`, formData).then((res) => {
    userInfo.value.image = res.data;
    upload.value = false;
    files.value = [];
  });
};
</script>

<template>
  <div>
    <el-form :model="userInfo" label-width="120px" style="margin: 50px">
      <el-form-item lable="头像">
        <img
          :src="userInfo.image"
          style="
            width: 120px;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
              rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
          "
        />
        <el-button v-show="!upload" style="margin-left: 5px">
          <el-upload
            accept="image/jpeg,image/gif,image/png"
            :file-list="files"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onChange"
          >
            选择图片
          </el-upload>
        </el-button>
        <el-button
          style="margin-left: 5px"
          @click="handleUploadImage"
          v-show="upload"
          >上传头像
        </el-button>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="userInfo.name" />
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="userInfo.role" disabled />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userInfo.sex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="userInfo.telephoneNum" />
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="userInfo.account" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="userInfo.password" type="password" />
      </el-form-item>
      <el-form-item style="display: flex; justify-content: space-between">
        <el-button type="primary" @click="updateUserInfo(userInfo)"
          >修改</el-button
        >
        <!-- <el-button style="margin-left: 100px">取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
</style>